<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>学分管理系统学生端登录</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: sans-serif;
			/*background: #34495e;*/
			background: url(../../static/img/bg-login.jpg) repeat;
		}

		.box {
			width: 300px;
			padding: 40px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: #191919;
			text-align: center;
			opacity: 0.7;
		}

		.box h1 {
			color: white;
			text-transform: uppercase;
			font-weight: 500;
		}

		.box input[type='text'],
		.box input[type='password'] {
			border: 0;
			background: none;
			display: block;
			margin: 20px auto;
			text-align: center;
			border: 2px solid #3498db;
			padding: 14px 10px;
			width: 200px;
			outline: none;
			color: white;
			border-radius: 24px;
			transition: 0.25s;
		}

		.box input[type='text']:focus,
		.box input[type='password']:focus {
			width: 280px;
			border-color: #2ecc71;
		}

		.submit {
			border: 0;
			background: none;
			margin: 20px auto;
			margin-top: 0;
			display: inline-block;
			text-align: center;
			border: 2px solid #3498db;
			padding: 10px 40px;
			outline: none;
			color: white;
			border-radius: 24px;
			transition: 0.25s;
			cursor: pointer;
			text-decoration: none;
			font-size: 12px;
		}

		.submit:hover {
			background: #2ecc71;
			border-color: #2ecc71;
		}
	</style>
</head>

<body>
<div class="box">
	<h1>学分管理系统学生端登录</h1>
	<form action="/login" method="post">
		<input type="text" name="username" placeholder="学号" />
		<input type="password" name="password" placeholder="密码" />
		<button class="submit" onclick="document:loginform.submit()">登录</button>
	</form>
</div>
</body>

</html>